<template>
  <div class="main">
    <section class="sign-in-container">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
        <el-form-item label="应用平台:" prop="platform">
          <div>
            <span v-for="(item, index) in platforms" :key="index">
              <span v-if="item.key == ruleForm.platform">{{item.name}}</span>
            </span>
          </div>
        </el-form-item>
        <el-form-item label="获取条件:" prop="condi">
          <el-checkbox-group class="get_condition" v-model="ruleForm.condi">
            <el-checkbox label="con1" name="con1" @change="e=>checkoutChange(e, 1)">
              推荐每购买1次钻石，赠送
              <el-form-item label="" prop="giveSuperNum">
                <el-input class="smallInput" v-model="ruleForm.giveSuperNum"></el-input>
              </el-form-item>
              次抽奖，封顶
              <el-form-item label="" prop="superCapsNum">
                <el-input class="smallInput" v-model="ruleForm.superCapsNum"></el-input>
              </el-form-item>
              次抽奖；
            </el-checkbox>
            <el-checkbox label="con2" name="con2" @change="e=>checkoutChange(e, 2)">
              单笔订单每满
              <el-form-item label="" prop="orderPaymentFull">
                <el-input class="smallInput" v-model="ruleForm.orderPaymentFull"></el-input>
              </el-form-item>
              元，赠送
              <el-form-item label="" prop="giveOrderNum">
                <el-input class="smallInput" v-model="ruleForm.giveOrderNum"></el-input>
              </el-form-item>
              次抽奖，封顶
              <el-form-item label="" prop="orderCapsNum">
                <el-input class="smallInput" type="number" v-model="ruleForm.orderCapsNum"></el-input>
              </el-form-item>
              次抽奖（含升级会员订单金额，赠送次数要确认收货后才给）
            </el-checkbox>
            <el-checkbox label="con3" name="con3" @change="e=>checkoutChange(e, 3)">
              注册并用微信登录赠送
              <el-form-item label="" prop="giveWechatNum">
                <el-input class="smallInput" v-model="ruleForm.giveWechatNum"></el-input>
              </el-form-item>
              次抽奖（活动开始后注册的用户，登录微信根据每个openid仅送N次抽奖）
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="抽奖标题:" prop="luckDrawTitle">
          <el-input v-model="ruleForm.luckDrawTitle"></el-input>
        </el-form-item>
        <el-form-item label="抽奖模板:" prop="prizeTemplate">
          <img src="../../../assets/images/prize.png" class="prizeModel" />
        </el-form-item>
        <el-form-item label="抽奖设置:">
          <div v-if="ruleForm.prizeList" class="lottery_item" v-for="(item, index) in ruleForm.prizeList" :key="index">
            <div class="award">
              <div class="prizeItem">
                <span v-if="index==0" class="prizeName">奖品一</span>
                <span v-if="index==1" class="prizeName">奖品二</span>
                <span v-if="index==2" class="prizeName">奖品三</span>
                <span v-if="index==3" class="prizeName">奖品四</span>
                <span v-if="index==4" class="prizeName">奖品五</span>
                <span v-if="index==5" class="prizeName">奖品六</span>
                <span v-if="index==6" class="prizeName">奖品七</span>
                <span v-if="index==7" class="prizeName">奖品八</span>
                <el-form-item class="inlineBlock" label="">
                  <el-select class="time" v-model="item.prizeType" placeholder="请选择活动区域"
                    @change="e=>awardChange(e, index)">
                    <el-option v-for="(item2,index2) in awards" :key="index2" :label="item2.name" :value="item2.key">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <!-- HONG_BAO("HONG_BAO", "红包"),GOODS("GOODS", "商品"),COUPON("COUPON", "优惠券"),CASH("CASH", "现金"),RANK("RANK", "排行奖池"),OTHER("OTHER", "其他"),THANK("THANK", "谢谢参与");-->
              <div class="prizeItem inlineBlock">
                <span v-if="item.prizeType == 'COUPON'">
                  <span v-if="item.couponName" class="yhq">
                    <!-- <img class="image" :src="item.prizePicture" > -->
                    <span>{{item.couponName}}</span>
                    <span @click="yhqClose(index)">
                      <i class="el-icon-close"></i>
                    </span>
                  </span>
                  <el-button v-else @click="showDialog('coupon', index)">+添加优惠券</el-button>
                </span>
                <span v-if="item.prizeType == 'CASH'">
                  <el-form-item class="inlineBlock" label="" :prop="`prizeList.${index}.cash`"
                    :rules="prizeListRule.cash">
                    现金:<el-input class="smallInput" v-model="item.cash"></el-input>元
                  </el-form-item>
                </span>
                <span v-if="item.prizeType == 'THANK'">
                  设置奖品默认谢谢参与可更换类型
                </span>
                <span v-if="item.prizeType == 'HONG_BAO'">
                  红包<el-input class="smallInput" v-model="item.hongbaoMoney"></el-input>元，
                </span>
                <!-- <el-button @click="showDialog('shop')">+添加商品</el-button>
              <el-button @click="showDialog('combo')">+添加套餐</el-button> -->
              </div>
              <div class="prizeItem nameItem">
                <span>名称</span>
                <el-input class="smallInput" placeholder="6字以内" maxlength="6" v-model="item.prizeName"></el-input>
              </div>
              <div class="prizeItem imgItem">
                <span>图片</span>
                <div class="inlineBlock uploadImg" @click="getIndex(index)">
                  <el-form-item label="" prop="delivery">
                    <el-upload class="" accept="image/*" :action="upladUrl" name="file" :show-file-list="false"
                      :on-success="uploadSuccess" :before-upload="beforeUpload">
                      <img v-if="item.prizePicture" :src="item.prizePicture" class="awardImg" />
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </div>
              </div>
              <div class="prizeItem probabilityItem">
                <span>抽奖概率</span>
                <el-form-item label="" :prop="`prizeList.${index}.probability`" :rules="prizeListRule.probability">
                  <el-input class="smallInput" type="number" placeholder="最多两位小数" :disabled="index == 7"
                    @input="probabilityInput" v-model="item.probability"></el-input>
                </el-form-item>
                <span>%，</span>
              </div>
              <div class="prizeItem sortItem">
                <span>排序</span>
                <el-form-item label="" :prop="`prizeList.${index}.sort`" :rules="prizeListRule.sort">
                  <el-input class="smallInput" placeholder="1-8不可重复" v-model="item.sort"></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="redBagFlag" label="奖励设置:" prop="date1">
          <span>红包使用期限</span>
          <el-date-picker v-model="ruleForm.date1" @change="date1Change" type="datetimerange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动规则:" prop="activityRule">
          <el-input type="textarea" v-model="ruleForm.activityRule"></el-input>
        </el-form-item>
        <el-form-item label="" prop="urlAddr">
          <el-input v-model="ruleForm.urlAddr" placeholder="URL地址"></el-input>
        </el-form-item>
        <el-form-item label="活动时间:" prop="activityDate">
          <el-date-picker v-model="ruleForm.activityDate" @change="activityDateChange" type="datetimerange"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否启用" prop="usingFlag">
          <span>否</span>
          <el-switch active-color="#13ce66" v-model="ruleForm.usingFlag" @change="usingChange"></el-switch>
          <span>是</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add()">保存</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script>
  import {
    luckDraw
  } from '@/api/activity/luckDraw'
  export default {
    data() {
      var condi = (rule, value, callback) => {
        if (this.ruleForm.recomBuyDiaCondi == 1 && value == '' && rule.field == 'superCapsNum') {
          if (value === null) {
            callback(new Error('请输入推荐赠送抽奖封顶次数'));
          }
          callback(new Error('请输入推荐赠送抽奖封顶次数'));
        } else if (this.ruleForm.orderPaymentCondi == 1 && value == '' && rule.field == 'orderPaymentFull') {
          if (value === null) {
            callback(new Error('请输入订单满赠金额'));
          }
          callback(new Error('请输入订单满赠金额!'));
        } else if (this.ruleForm.recomBuyDiaCondi == 1 && value == '' && rule.field == 'giveSuperNum') {
          if (value === null) {
            callback(new Error('请输入推荐抽奖次数'));
          }
          callback(new Error('请输入推荐抽奖次数!'));
        } else if (this.ruleForm.orderPaymentCondi == 1 && value == '' && rule.field == 'giveOrderNum') {
          if (value === null) {
            callback(new Error('请输入订单抽奖次数'));
          }
          callback(new Error('请输入订单抽奖次数!'));
        } else if (this.ruleForm.orderPaymentCondi == 1 && value == '' && rule.field == 'orderCapsNum') {
          if (value === null) {
            callback(new Error('请输入订单抽奖封顶'));
          }
          callback(new Error('请输入订单抽奖封顶!'));
        } else if (this.ruleForm.wechatRegistCondi == 1 && value == '' && rule.field == 'giveWechatNum') {
          if (value === null) {
            callback(new Error('请输入登录微信抽奖次数'));
          }
          callback(new Error('请输入登录微信抽奖次数!'));
        } else {
          callback();
        }
      };
      var probability = (rule, value, callback) => {
        console.log(typeof value)
        if(value === ""||value === null) {
          callback(new Error('请输入抽奖概率!'));
        } else if (value < 0) {
          callback(new Error('抽奖概率不能为负数!'));
        } else {
          callback();
        }
        // let probabilityAll = 0
        // let probabilityOther = 0
        // this.ruleForm.prizeList[this.ruleForm.prizeList.length - 1].probability = 0
        // for (let item in this.ruleForm.prizeList) {
        //   probabilityAll += Number(this.ruleForm.prizeList[item].probability)
        //   if (item < this.ruleForm.prizeList.length - 1) {
        //     probabilityOther += Number(this.ruleForm.prizeList[item].probability)
        //   }
        // }
        // // console.log(String(value).split(".")[1])
        // let result = 100 - probabilityOther;
        // if (probabilityAll > 100) {
        //   callback('概率不能超过100%')
        // } else if (String(value).split(".")[1]&&String(value).split(".")[1].length > 2) {
        //   callback('概率最多两个小数点')
        // } else {
        //   callback();
        // }
      };
      var sort = (rule, value, callback) => {
        if (!Number.isInteger(Number(value))) {
          callback(new Error('必须为整数!'));
        } else if (value > 8 || value < 1) {
          callback(new Error('必须为1-8的正整数!'));
        } else if (value == '' || value === null) {
          callback(new Error('请输入排序!'));
        } else {
          callback();
        }
        let sorts = []
        for (let item in this.ruleForm.prizeList) {
          sorts.push(Number(this.ruleForm.prizeList[item].sort))
        }
        let nary = sorts.slice().sort();
        for (let i = 0; i < sorts.length; i++) {
          if (nary[i] == nary[i + 1] && nary[i] != "") {
            this.$message.error('排序不能重复')
            break
          }
        }
      };
      return {
        platforms: [{
          key: 1,
          name: '碧选'
        }],
        redBagFlag: false,
        award: [],
        awards: [], //奖项
        awardIndex: 0,
        date1: [],
        activityDate: [],
        condi: [],
        ruleForm: {
          condi: [],
          date1: [],
          activityDate: [],
          prizeList: [],
          actEndTime: '',
          actStartTime: '',
          activityRule: '',
          createdAt: '',
          giveOrderNum: '',
          giveSuperNum: '',
          giveWechatNum: '',
          hongbaoEndTime: '',
          hongbaoStartTime: '',
          id: '',
          luckDrawTitle: '',
          orderPaymentFull: '',
          orderPaymentCondi: 0,
          orderCapsNum: 0,
          platform: 1,
          prizeTemplate: '',
          recomBuyDiaCondi: 0,
          superCapsNum: '',
          updatedAt: '',
          urlAddr: '',
          usingFlag: '',
          wechatRegistCondi: 0,
        },
        prizeListRule: {
          prizeType: [{
            required: true,
            message: '请输入奖品类型',
            trigger: 'blur'
          }],
          cash: [{
            required: true,
            message: '请输入现金',
            trigger: 'blur'
          }],
          probability: [{
            validator: probability,
            trigger: 'blur'
          }],
          sort: [{
            validator: sort,
            trigger: 'blur'
          }]
        },
        rules: {
          superCapsNum: [{
            validator: condi,
            trigger: 'blur'
          }],
          orderPaymentFull: [{
            validator: condi,
            trigger: 'blur'
          }],
          giveSuperNum: [{
            validator: condi,
            trigger: 'blur'
          }],
          giveOrderNum: [{
            validator: condi,
            trigger: 'blur'
          }],
          orderCapsNum: [{
            validator: condi,
            trigger: 'blur'
          }],
          giveWechatNum: [{
            validator: condi,
            trigger: 'blur'
          }],
          activityRule: [{
            required: true,
            message: '请输入活动规则',
            trigger: 'blur'
          }],
          date1: [{
            required: true,
            message: '请输入红包使用期限',
            trigger: 'blur'
          }],
          activityDate: [{
            required: true,
            message: '请输入活动时间',
            trigger: 'blur'
          }],
          prizeList: [{
            required: true,
            message: '请输入奖励设置',
            trigger: 'blur'
          }],
          luckDrawTitle: [{
            required: true,
            message: '请输入抽奖标题',
            trigger: 'blur'
          }],
          condi: [{
            required: true,
            message: '请选择获取条件',
            trigger: 'blur'
          }],
        },
        submitFlag: true, //提交验证是否通过
        pageType: '', //类型
      };
    },
    watch: {
      'ruleForm.usingFlag': {
        handler(val, oldVal) {
          val = val ? 1 : 0
          console.log(val)
        },
        deep: true,
      },
      // 'ruleForm.prizeList': {
      //   handler(val, oldVal) {
      //     let probabilitySum = 0
      //     let sorts = []
      //     for (let item in val) {
      //       probabilitySum += Number(val[item].probability)
      //       if (probabilitySum > 100) {
      //         this.$message.error('概率不能超过100')
      //         this.submitFlag = false
      //         break
      //       }
      //       sorts.push(Number(val[item].sort))
      //     }
      //     console.log(sorts)
      //   },
      //   deep: true
      // }
    },
    mounted() {
      //获取详情数据
      this.pageType = this.$route.query.type
      console.log(this.pageType)
      if (this.pageType == 'edit') {
        this.getData(this.$route.query.luckId)
        this.$nextTick(_ => {
          this.$store.dispatch('editTageTitle', {
            name: "luckDrawIndexEdit",
            title: "编辑"
          })
        });
      } else {
        this.$nextTick(_ => {
          this.$store.dispatch('editTageTitle', {
            name: "luckDrawIndexEdit",
            title: "新增"
          })
        });
        for (let i = 0; i < 8; i++) {
          this.ruleForm.prizeList.push({
            cash: 0,
            couponActivityId: '',
            couponName: '',
            hongbaoMoney: 0,
            prizeName: "",
            prizePicture: "",
            prizeType: "THANK",
            probability: 0,
            sort: i + 1
          })
        }
      }
      console.log("this.ruleForm.prizeList", this.ruleForm.prizeList)
      this.getAward()
    },
    methods: {
      probabilityInput(e) {
        let probabilityAll = 0
        let probabilityOther = 0
        this.ruleForm.prizeList[this.ruleForm.prizeList.length - 1].probability = 0
        for (let item in this.ruleForm.prizeList) {
          probabilityAll += Number(this.ruleForm.prizeList[item].probability)
          if (item < this.ruleForm.prizeList.length - 1) {
            probabilityOther += Number(this.ruleForm.prizeList[item].probability)
          }
        }
        let result = 100 - probabilityOther;
        console.log(String(result).indexOf("."))
        if (probabilityAll > 100) {
          this.$message.error('概率不能超过100%')
        } else if (e.split(".")[1]&&e.split(".")[1].length > 2) {
          this.$message.error('概率最多两个小数点')
        } else if (String(result).indexOf(".") != -1) {
          this.ruleForm.prizeList[this.ruleForm.prizeList.length - 1].probability = (100 - probabilityOther).toFixed(2)
        } else {
          this.ruleForm.prizeList[this.ruleForm.prizeList.length - 1].probability = 100 - probabilityOther
        }
        console.log(e)
        console.log("111", this.ruleForm.prizeList[7].probability)
      },
      usingChange(e) {
        this.ruleForm.usingFlag = e
      },
      awardChange(e, index) {
        this.ruleForm.prizeList[index].couponName = ""
        this.ruleForm.prizeList[index].cash = ""
        this.ruleForm.prizeList[index].hongbaoMoney = ""
        this.ruleForm.prizeList[index].prizePicture = ""
        this.ruleForm.prizeList[index].prizeName = ""
        this.ruleForm.prizeList[index].probability = 0
        this.ruleForm.prizeList[index].sort = ""
        this.ruleForm.prizeList[index].prizeType = e
        console.log("this.ruleForm.prizeList[index].prizeType", this.ruleForm.prizeList[index].prizeType)
        for (let item in this.ruleForm.prizeList) {
          if (this.ruleForm.prizeList[item].prizeType == 'HONG_BAO') {
            this.redBagFlag = true
            console.log(this.redBagFlag)
            break
          } else {
            this.redBagFlag = false
          }
        }
      },
      //删除优惠券
      yhqClose(index) {
        this.ruleForm.prizeList[index].couponName = ''
      },
      checkoutChange(e, id) {
        console.log(this.ruleForm.condi)
        this.$forceUpdate() //强制渲染组件
        switch (id) {
          case 1:
            this.ruleForm.recomBuyDiaCondi = e ? 1 : 0
            this.ruleForm.giveSuperNum = ''
            this.ruleForm.superCapsNum = ''
            break
          case 2:
            this.ruleForm.orderPaymentCondi = e ? 1 : 0
            this.ruleForm.orderPaymentFull = ''
            this.ruleForm.giveOrderNum = ''
            this.ruleForm.orderCapsNum = ''
            break
          case 3:
            this.ruleForm.wechatRegistCondi = e ? 1 : 0
            this.ruleForm.giveWechatNum = ''
            break
          default:
        }
      },
      activityDateChange(e) {
        console.log(e)
        this.ruleForm.actStartTime = e ? e[0] : ''
        this.ruleForm.actEndTime = e ? e[1] : ''
        this.ruleForm.activityDate = e
      },
      date1Change(e) {
        console.log(e)
        this.ruleForm.hongbaoStartTime = e ? e[0] : ''
        this.ruleForm.hongbaoEndTime = e ? e[1] : ''
        this.ruleForm.date1 = e
        console.log(this.ruleForm.date1)
      },
      add() {
        this.$refs.ruleForm.validate((valid) => {
          console.log(valid)
          if (valid) {
            this.ruleForm.usingFlag = this.ruleForm.usingFlag ? 1 : 0
            this.ruleForm.orderCapsNum = Number(this.ruleForm.orderCapsNum)
            console.log(JSON.stringify(this.ruleForm))
            luckDraw.luckDrawAdd({
              date1: this.date1,
              activityDate: this.ruleForm.activityDate,
              platform: 1,
              ...this.ruleForm
            }).then(res => {
              console.log(res)
              if (res.code == 200) {
                this.$message.success('保存成功！')
                this.$router.push({
                  name: 'luckDrawIndex'
                })
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getIndex(index) {
        this.awardIndex = index
        console.log("index", index)
      },
      getAward() {
        luckDraw.luckDrawAward().then(res => {
          if (res.code == 200) {
            this.awards = res.data
            console.log("this.awards", this.awards)
          } else {
            this.$message.error(res.message)
          }
        })
      },
      getData(id) {
        luckDraw.luckDrawDesc({
          luckId: id || 0
        }).then(res => {
          if (res.code == 200) {
            this.ruleForm = res.data
            this.ruleForm.usingFlag = this.ruleForm.usingFlag == 1 ? true : false
            // 红包期限是否展示
            for (let item in this.ruleForm.prizeList) {
              if (this.ruleForm.prizeList[item].prizeType == 'HONG_BAO') {
                this.redBagFlag = true
                break
              } else {
                this.redBagFlag = false
              }
            }
            this.ruleForm.date1 = res.data.hongbaoStartTime && res.data.hongbaoEndTime ? [res.data
              .hongbaoStartTime || '', res.data.hongbaoEndTime || ''
            ] : []
            this.ruleForm.activityDate = [new Date(res.data.actStartTime) || '', new Date(res.data.actEndTime) ||
              ''
            ]
            console.log(this.ruleForm)
            this.ruleForm.condi = []
            if (this.ruleForm.recomBuyDiaCondi == 1) {
              this.ruleForm.condi.push('con1')
            }
            if (this.ruleForm.orderPaymentCondi == 1) {
              this.ruleForm.condi.push('con2')
            }
            if (this.ruleForm.wechatRegistCondi == 1) {
              this.ruleForm.condi.push('con3')
            }
            for (let item in this.ruleForm.prizeList) {
              for (let item1 in this.awards) {
                if (this.awards[item1].key == this.ruleForm.prizeList[item].prizeType) {
                  this.award.push(this.ruleForm.prizeList[item].prizeType)
                }
              }
            }
            this.ruleForm = JSON.parse(JSON.stringify(this.ruleForm)) //触发响应时监听
          } else {
            this.$message.error(res.message)
          }
        })
      },
      showDialog(type, index) {
        switch (type) {
          case 'coupon':
            this.couponChoose({
              validFlag: true
            }).then(res => {
              if (res.length > 1) {
                this.$message.error('优惠券只支持一项')
                return
              }
              console.log(this.ruleForm.prizeList[index])
              this.ruleForm.prizeList[index].couponActivityId = res[0].couponActivityId
              this.ruleForm.prizeList[index].couponName = res[0].name
              console.log(this.ruleForm.prizeList[index])
            })
            break
          case 'shop':
            this.couponChoose({
                validFlag: true,
                receiveType: 2
              },
              this.ruleForm.upgradeMakeMoneyCoupons
            ).then(val => {
              console.log("val", val)
              this.ruleForm.upgradeMakeMoneyCoupons = val
            })
            break
          case 'combo':
            this.packageChoose({}).then(val => {
              this.tempGoodsSelect = this.tempGoodsSelect.filter(item => item.type === 1).concat(val.map(item => {
                return {
                  goods_id: item.packageId,
                  pic: item.image,
                  title: item.name,
                  subtitle: item.subTitle,
                  marketValue: item.marketValue,
                  price: item.price,
                  type: 2,
                  from_type: 2
                }
              }))
            });
            break
          default:
        }
      },
      beforeUpload(file) {
        if (!/image/.test(file.type)) {
          this.$message.error('只能上传图片')
          return false
        }
        if (file.size > 1024 * 1024) {
          this.$message.error('图片不能大于1M')
          return false
        }
      },
      uploadSuccess(res) {
        console.log(res)
        this.ruleForm.prizeList[this.awardIndex].prizePicture = this.replaceImgUrl(res.filePath)
        console.log(this.ruleForm.prizeList)
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  /deep/ {
    .el-form-item.is-error .el-input__inner,
    .el-form-item.is-error .el-input__inner:focus,
    .el-form-item.is-error .el-textarea__inner,
    .el-form-item.is-error .el-textarea__inner:focus,
    .el-message-box__input input.invalid,
    .el-message-box__input input.invalid:focus {
      border-color: #F56C6C !important;
    }
  }

  .prizeName {
    padding-right: 10px;
  }

  .award {
    display: flex;

    .prizeItem {
      flex: 2;
      display: flex;
    }

    .imgItem {
      flex: 1;
    }

    .nameItem,
    .probabilityItem,
    .sortItem {
      flex: 2;
    }
  }

  .uploadImg {
    padding: 0 5px;
  }

  .prizeModel {
    height: 62px;
    width: 30px;
  }

  .el-checkbox {
    margin: 10px 0;
  }

  .yhq {
    width: 150px;
    vertical-align: middle;
    display: inline-block;
    display: flex;
    align-items: center;
    padding: 0 5px;

    span:nth-child(1) {
      border-left: 1px solid #ccc;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      padding: 0 5px;
    }

    span:nth-child(2) {
      border: 1px solid #ccc;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }
  }

  .image {
    width: 43px;
    height: 38px
  }

  .award {
    display: flex;
  }

  .awardImg {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
  }

  /deep/.el-checkbox {
    display: flex;
    align-items: center;
    flex-direction: row;

    span {
      display: flex;
      align-items: center;
    }
  }

  .inlineBlock {
    display: flex;
    flex-direction: row;
  }

  /deep/.inlineBlock {
    .el-upload {
      border: 1px solid #ccc;
      width: 43px;
    }
  }

  .lottery_item {
    margin-bottom: 20px;
  }

  /deep/.avatar-uploader {
    width: 43px;
    height: 43px;
    display: inline-block;
    vertical-align: middle;

    .el-upload {
      width: 100% !important;
      height: 100% !important;
    }
  }

  .get_condition {
    display: flex;
    flex-direction: column;
    transform: translateY(-20px);
    width: 80%;
  }

  .active_time {
    display: flex;
  }

  .date_group {
    display: flex;

    .line {
      padding: 0 10px;
    }
  }

  /deep/.time {
    width: 200px;

    .el-input {
      width: 100% !important;
    }
  }

  /* 通用样式 */
  .smallInput {
    width: 150px;
    padding: 5px 10px;
  }

  .main {
    padding-top: 20px;
  }
</style>
